<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="./bootvue/css/bootstrap.min.css">
</head>
<body>
<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">用户管理系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">欢迎：xxx</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div id="app">
    <!--中心布局-->
    <div class="container-fluid">
        <!--搜索框-->
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="searchName">姓名</label>
                        <input type="text" class="form-control" id="searchName" v-model="searchName">
                    </div>
                    <div class="form-group">
                        <label for="searchPhone">电话号码</label>
                        <input type="text" class="form-control" id="searchPhone" v-model="searchPhone">
                    </div>
                    <button type="button" class="btn btn-info" @click="findLike">搜索</button>
                </form>
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-8">
                <!--用户信息表-->
                <table class="table table-striped table-bordered table-hover">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>薪资</th>
                        <th>电话号码</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                        <tr v-for="user,index in users":key="user.id">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.phoneCode}}</td>
                            <td>
                                <button class="btn btn-danger" @click="deleteUserInfo(user.id)">删除</button>&nbsp;
                                <button class="btn btn-primary" @click="findOneUserInfo(user.id)">修改</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-4">
                <form>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                    </div>
                    <div class="form-group">
                        <label for="salery">薪资</label>
                        <input type="text" class="form-control" id="salery" v-model="user.salary" placeholder="请输入薪资">
                    </div>
                    <div class="form-group">
                        <label for="phoneCode">电话号码</label>
                        <input type="text" class="form-control" id="phoneCode" v-model="user.phoneCode" placeholder="请输入电话号码">
                    </div>
                    <button type="button" class="btn btn-default" @click="saveUserInfo">提交</button>
                    <button type="button" class="btn btn-danger" @click="restUserInfo">重置</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="bootvue/js/vue.js"></script>
<script src="bootvue/js/Axios.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            users:[],   //数值来源于后端，在页面加载完成前赋值
            user:{},    //用来完成数据双向绑定
            searchName:"",
            searchPhone:"",
        },
        methods: {
            findLike(){
                let _this = this;
                axios.get("http://localhost:8989/users/user/findLike?name=" + _this.searchName +"&phoneCode=" + _this.searchPhone).then(function (response){
                    _this.users = response.data;
                }).catch(function (err){
                    console.log(err);
                })
            },
            //查询一个用户信息
            findOneUserInfo(id){
                //根据id查询一个人
                let _this = this;
                axios.get("http://localhost:8989/users/user/findOne?id=" + id).then(function(response){
                    _this.user = response.data;
                }).catch(function (err){
                    console.log(err);
                });
            },
            //根据用户id删除用户信息
            deleteUserInfo(id){
                let _this = this;
                if(window.confirm("是否要删除这条记录吗? ")){
                    //使用axios发送请求，根据id删除用户信息
                    axios.get("http://localhost:8989/users/user/delete?id=" + id).then(function (response){
                        if(response.data.success){
                            //更新页面数据
                            _this.findAll();
                        } else {
                            alert(response.data.message);
                        }
                    }).catch(function (err){
                        console.log(err);
                    });
                }
            },
            //保存用户信息
            saveUserInfo(){
                let _this = this;
                axios.post('http://localhost:8989/users/user/save',this.user).then(function (response){
                    if(response.data.success){
                        //更新页面列表
                        _this.findAll();
                        //清空上一次保存的信息
                        _this.user={};
                    } else {
                        alert(response.data.msg);
                    }
                }).catch(function (err){
                    console.log(err);
                });
            },
            //查询所有用户信息的函数
            findAll(){
                let _this = this;
                //发送查询所有用户信息
                axios.get('http://localhost:8989/users/user/findAll').then(function(response) {
                    _this.users = response.data;
                }).catch(function (err){
                    console.log(err);
                });
            },
            //重置表单数据
            restUserInfo(){
                this.user ={};
            }
        },
        //生命周期相关
        created(){
            this.findAll();
        },
    });
</script>
</body>
</html>
    